<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后台管理系统首页</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">



    <!--    引入首页样式-->
    <link rel="shortcut icon" href="favicon.ico" />
    <link href="../../indexCss.css" rel="stylesheet" type="text/css">
    <style>
        body {

            position: relative;
            color: rgba(0, 0, 0, 0.68)
        }

        a {
            color: rgba(0, 0, 0, 0.68);
            cursor: pointer; /*加手图标*/
            text-decoration: none;
        }

        a:hover {
            color: #24407EAD;
        }

        #topdiv > div {
            margin: 60px 0;

        }

    </style>
</head>
<body>
<!--动态背景画布-->
<!--<canvas id="canvas" style="height: 100%;z-index: -111;"></canvas>-->
<myheader></myheader>

<section>

    <div class="container" id="topdiv">
        <div class="row clearfix" >
            <div class="col-md-12 " style="padding: 0;position: relative;">
<!--            <div class="col-md-8 " style="padding: 0">-->
                <div class="col-md-2 ">
                    <mydiv v-bind:cls="cls" v-bind:com="com" v-bind:rcls="rcls" v-bind:rep="rep"></mydiv>
                </div>
                <div class="col-md-10 " style="float: right" id="ddd">
                    <h1>{{content}}</h1>
                    <div class="col-md-12 li" style="padding: 0;margin-left: 10px">
                            <!--瀑布流开始-->
                            <div class="grid">
                                <div class="grid-item col-md-4" v-for="c in arr" >

                                    <div class="thumbnail"   style="height: 500px; overflow: hidden">
                                        <img alt="300x200" :src="c.url" style="height: 250px" ><!--width: 400px;-->
                                        <div class="caption">
                                            <h3><a :href="'/admin/admin/adminindexOneId.html?id='+c.id" STYLE="color:#282727;font-size: 15px">
                                                <b>商品名:</b>{{c.name}}</a>
                                            </h3>
                                            <h5>
                                                <b>库存:</b>{{c.sum}}&nbsp;
                                                <b>已售:</b>{{c.salesnum}}&nbsp;
                                                <b>价格:</b>{{c.price}}
                                            </h5>
                                            <p><a :href="'/admin/admin/adminindexOneId.html?id='+c.id" STYLE="font-size: 15px">
                                                <b>商品简介:</b>{{c.intro}}</a>
                                            </p>
                                        </div>
                                        <div style="position: absolute;bottom: 22px;right: 20px">
                                            <a :href="'/admin/admin/updateCommodity.html?id='+c.id" class="btn btn-primary btn-xs" type="button">去修改</a>
                                            <a  type="button" @click="del(c.id)" class="btn btn-danger btn-xs">删除</a>
                                        </div>
                                    </div>

                                </div>

                            </div>
             </div>
                </div>
                </div>

        </div>
    </div>

</section>
<!--正文在这里继续-->

<!--<myfooter></myfooter>-->
</div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<!--引入瀑布流相关js文件-->
<script src="js/masonry.pkgd.min.js"></script>
<script src="js/imagesloaded.pkgd.js"></script>
<!--导入弹窗组件-->
<script src=" https://unpkg.com/sweetalert/dist/sweetalert.min.js "></script>
<!--引入vue和axios-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!--引入footer-->
<!--<script src="adminjs/footer.js"></script>-->
<!--引入header-->
<script src="../adminjs/header.js"></script>
<script>

    let section_v = new Vue({
        el: "section",
        data: {
            cls: [], //类集合
            com: [], //商品集合
            arr:[],
            content:"",
            rcls: [], //资讯类集合
            rep: [], //资讯集合
            // //绑定所要展示的商品信息属性

        },
        created: function () {
            let content = location.search.split("=")[1]
            axios.post("/admin/CommoditySearch?content="+content).then(function (response) {
                if (response.data.length==0 || response.data==null){
                    section_v.content = "您搜索的商品没有找到哦!!!,换一个试试吧...";
                }
                section_v.arr = response.data;
            }),
            axios.post("/admin/selectToClass").then(function (response) {
                section_v.cls = response.data;
            }),
                axios.post("/admin/selectToCommodity").then(function (response) {
                    section_v.com = response.data;
                })
            axios.post("/admin/selectToReportCls").then(function (response) {
                section_v.rcls = response.data;
            }),
                axios.post("/admin/selectToReport").then(function (response) {
                    section_v.rep = response.data;
                })

        },
        methods: {
            skip:function (id){
                location.href="/admin/adminindex.html#d"+id;

            },
            cls: function (id) {
                axios.post("/admin/selectToCommodity?id=" + id).then(function (response) {
                    let com = response.data;
                    section_v.name = com.name;
                    section_v.intro = com.intro;
                    section_v.sum = com.sum;
                    section_v.price = com.price;
                    location.reload();
                })
            },
            del:function (id){
                if(confirm("您真的要删除吗???")){
                    axios.post("/admin/CommodityDelete?id=" + id).then(function () {
                        location.reload();
                    })
                }else {

                }

            }

        },
    })


</script>
<!--引入左侧边栏组件-->
<script src="../adminjs/mydiv.js"></script>
<!--背景线条-->
<script src="../adminjs/bg.js"></script>　
<!--右键出字体-->
<script src="../adminjs/bgfont.js"></script>　　
<!--引入动态背景js文件-->
<!--<script src="../bgjs2.js"></script>-->
</body>
</html>